<template>
	<view class="content">
		<searchNav
		@clickToSearchContentCallback="clickToSearchContentCallback" 
		:clickSearchValue="clickSearchValue"></searchNav>
		<searchHistory
		v-show="historyList.length > 0 ? true : false" 
		:listData="historyList" 
		@clickToClearHistoryCallback="clickToClearHistoryCallback" 
		@clickToHistoryValue="clickToHistoryValue" ></searchHistory>
		<searchResulsEmpty v-show="showResultsEmpty"></searchResulsEmpty>
		<searchRecommend
		v-show="recommendList.length > 0 && showStatus == 1 ? true : false" 
		:listData="recommendList" 
		@clickToItem="clickToItemJumpVideo"></searchRecommend>
		<searchResults 
		v-show=" resultsList.length > 0 && showStatus == 2 ? true : false" 
		:listData="resultsList"
		@clickToItem="clickToItemJumpVideo"></searchResults>
	</view>
</template>

<script>
	import searchNav from "../../pages/search/searchNav.vue"
	import searchHistory from "../../pages/search/searchHistory.vue"
	import searchResulsEmpty from "../../pages/search/searchResultsEmpty.vue"
	import searchRecommend from "../../pages/search/searchRecommend.vue"
	import searchResults from "../../pages/search/searchResults.vue"
	
	import interfaces from '@/utils/interfaces.js'
	import config from '@/utils/config.js'
	import tools from "@/utils/tools.js"

	export default {
		data() {
			return {
				historyList: [],
				recommendList: [],
				resultsList:[],
				// 点击历史搜索的值
				clickSearchValue: "",
				// 1:推荐 2:结果
				showStatus: 1,
				showResultsEmpty: false
			}
		},
		onLoad() {
			let list = uni.getStorageSync('searchHistory')
			if (list) {
				this.historyList = JSON.parse(list)
			} 
			this.requestRecommendData()
		},
		methods: {
			clickToSearchContentCallback(value) { //搜索回调
				this.addSearchHistory(value)
			},
			clickToClearHistoryCallback() {  //清空搜索历史
				this.clearSearchHistory()
			},
			clickToHistoryValue(value) { //点击历史搜索
				this.clickSearchValue = value
				this.addSearchHistory(value)
			},
			addSearchHistory(value) {  //搜索操作
				// console.log(value)
				if (!value) {
					return
				} 
				
				// 获取value在历史记录list里的index
				const findItem = this.historyList.findIndex(item => item == value)
				// console.log(findItem)
				// 若value在历史记录list中,且value不在list的第一位
				if (findItem !== -1) {
					// console.log("删除后添加")
					// 删除历史list中的曾经的同值value
					this.historyList.splice(findItem, 1)
					// unshift在list开头插入value
					this.historyList.unshift(value)
				} else{
					// console.log("直接添加")
					if (this.historyList.length >= 15) {
						this.historyList.pop()
					}
					this.historyList.unshift(value)
				}
				// 将更新后的list存储在本地缓存中指定的'searchHistory'中
				uni.setStorageSync('searchHistory', JSON.stringify(this.historyList))
				// 显示 搜索结果
				this.requestResults(value)
			},
			clearSearchHistory() { //清空搜索历史
				uni.showModal({
					content:"是否确认清除历史记录",
					success: (res) => {
						if(res.confirm) {
							uni.removeStorageSync('searchHistory')
							this.historyList = []
						}
					}
				})
			},
			requestRecommendData() { //热播榜单
				let self = this;
				self.request({
					url:interfaces.search_recommend,
					method:"GET",
					success: (res)=> {
						console.log("榜单",res)
						self.recommendList = res.content
					}
				});
			},
			requestResults(value) { //搜索  结果
				let self = this;
				self.request({
					url: interfaces.search_results,
					data:{"kw":value},
					method:"POST",
					success: (res)=>{
						// console.log("搜索",res)
						self.resultsList = res.content
						if (self.resultsList.length > 0) {
							self.showStatus = 2
							self.showResultsEmpty = false
						} else{
							self.showStatus = 1
							self.showResultsEmpty = true
						}
					},
					fail:(error)=> {
						console.log("错误 错误 错误:" + error + ":" + url)
					}
				});
			},
			clickToItemJumpVideo(res) { //跳转视频播放页
				let data = {playlet_id:res.playlet_id, 
					        name:res.name, 
						    last_episode_number:res.last_episode_number}
				tools.jump_video_page_by_info(data)
			}
		},
		components: {
			searchNav,
			searchHistory,
			searchResulsEmpty,
			searchRecommend,
			searchResults
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
</style>
